<template>
  <div class="box">
    <div class="img">
      <img src="../assets/1.jpg" alt="" />
    </div>
    <ul>
      <li v-for="(item, index) in ull" :key="index">{{ item.text }}</li>
      <li class="pao">即将开抢</li>
    </ul>
    <div class="list">
      <div class="one" v-for="(item, index) in arr" :key="index">
        <div class="tu">
          <img :src="item.picture" alt="" />
        </div>
        <div class="right">
          <p class="name">{{ item.name }}</p>
          <h3 class="h2">{{ item.name }}</h3>
          <div class="xia">
            <div class="zuo">
              <p class="p1">{{ item.p1 }}</p>
              <p>
                ￥<span class="money">{{ item.min_price}}</span
                ><span>{{ item.promotion_info }}</span>
              </p>
              <del>￥{{ item.unit}}</del>
            </div>
            <div class="you">
              <span>马上抢</span>
              <p>{{ item.month_saled_content}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { tuan_list } from "../api";
export default {
  data() {
    return {
      arr: null,
      ull: [{ text: "正在抢购" }, { text: "上新预告" }],
      obj1: [
        // {
        //   pic: "https://ts1.cn.mm.bing.net/th/id/R-C.b402575fc5f478ea1bf24c28ab82af3c?rik=9y1rm9J8He7fwg&riu=http%3a%2f%2fpic.52112.com%2f180411%2f180411_42%2fuxWavSBvBd_small.jpg&ehk=eVdnDx8xRXUuJQ1T2evqOHekSGifbvOG34t25dgEgTA%3d&risl=&pid=ImgRaw&r=0",
        //   name: "汉堡王 | 北美新天地餐厅",
        //   h2: "买1送1明星皇堡 | 用心火烤肉质紧实 鲜艳多汁 爆爆团",
        //   p1: "爆爆团价",
        //   money: "25",
        //   zhe: "5折",
        //   yuanjia: "50",
        //   qiang: "马上抢",
        //   mai: "已售9029份",
        // },
        // {
        //   pic: "https://www.3158.cn/data/attachment/album/2018/07/03/20180703102817836583.jpg",
        //   name: "汉堡王 | 北美新天地餐厅",
        //   h2: "买1送1明星皇堡 | 用心火烤肉质紧实 鲜艳多汁 爆爆团",
        //   p1: "爆爆团价",
        //   money: "25",
        //   zhe: "5折",
        //   yuanjia: "50",
        //   qiang: "马上抢",
        //   mai: "已售9029份",
        // },
        // {
        //   pic: "https://ts1.cn.mm.bing.net/th/id/R-C.4e29c23679803c7b2ac80f2214204b57?rik=auHarkh%2ffwz5FQ&riu=http%3a%2f%2fuploads.qj.com.cn%2fimages%2f74805%2f201803133790974.jpg&ehk=3sRN85EsGNU6%2fl9cGVIPoWUJL1BrSBq%2fD%2fLB%2fgPv5Pk%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
        //   name: "汉堡王 | 北美新天地餐厅",
        //   h2: "买1送1明星皇堡 | 用心火烤肉质紧实 鲜艳多汁 爆爆团",
        //   p1: "爆爆团价",
        //   money: "25",
        //   zhe: "5折",
        //   yuanjia: "50",
        //   qiang: "马上抢",
        //   mai: "已售9029份",
        // }
      ],
    };
  },
  mounted() {
    tuan_list({ status: 0 }).then((res) => {
      // console.log(res)
      // this.list=res.data.list
      // console.log(res.data.list);
      this.arr = res.data.list;
      // console.log(arr);

      console.log(this.arr);
    });
  },
};
</script>
<style>
.box .img img {
  width: 100%;
  height: 100%;
  display: block;
}
ul {
  margin-top: -80px;
  padding: 10px;
  display: flex;
  position: relative;
}
ul li {
  color: white;
  padding: 5px;
  margin: 20px;
}
ul .pao {
  width: 50px;
  height: 8px;
  font-size: 12px;
  background: white;
  color: red;
  border-radius: 30px;
  text-align: center;
  line-height: 8px;
  position: absolute;
  top: -10px;
  left: 130px;
}
.list {
  height: 450px;
  overflow: auto;
}
.one {
  display: flex;
  margin: 10px 15px;
  padding: 10px;
  background: rgb(205, 247, 160);
  height: 150px;
  border-radius: 10px;
}
.one .tu {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.one .tu img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.right {
  margin-left: 20px;
}
.right > p {
  font-size: 14px;
  color: rgb(73, 73, 73);
  margin-bottom: 5px;
}
.right .xia {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.right .xia .zuo .p1 {
  font-size: 14px;
  color: red;
}
.right .xia .zuo .p1 + p {
  font-size: 14px;
  color: red;
  margin-top: 5px;
}
.right .xia .zuo span {
  font-size: 20px;
  font-weight: 700;
  color: red;
}
.right .xia .zuo span + span {
  display: inline-block;
  font-size: 18px;
  padding: 1px 5px;
  border: 1px solid red;
  margin-left: 10px;
  line-height: 20px;
  margin-top: -90px;
  border-radius: 5px;
}
.right .xia .zuo p + del {
  font-size: 14px;
  color: rgb(139, 139, 139);
}
.right .xia .you span {
  display: inline-block;
  margin: 5px 0;
  padding: 8px 15px;
  border-radius: 20px;
  background: red;
  color: white;
}
.right .xia .you p {
  font-size: 14px;
  color: red;
  margin-left: 5px;
}
</style>